<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预警中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <!-- 顶部统计 -->
    <div class="bg-gradient-to-r from-red-500 to-red-600 text-white p-6">
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-xl font-bold">预警中心</h1>
            <div class="flex items-center space-x-3">
                <button class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                    <i class="fas fa-filter text-white"></i>
                </button>
                <button class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                    <i class="fas fa-cog text-white"></i>
                </button>
            </div>
        </div>
        
        <!-- 预警统计 -->
        <div class="grid grid-cols-3 gap-4">
            <div class="text-center">
                <div class="text-2xl font-bold">8</div>
                <div class="text-red-100 text-sm">总预警</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold">3</div>
                <div class="text-red-100 text-sm">紧急</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold">5</div>
                <div class="text-red-100 text-sm">待处理</div>
            </div>
        </div>
    </div>

    <!-- 预警筛选 -->
    <div class="bg-white p-4 border-b">
        <div class="flex space-x-2 overflow-x-auto">
            <button class="px-4 py-2 bg-red-600 text-white rounded-full text-sm whitespace-nowrap">全部</button>
            <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">紧急</button>
            <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">重要</button>
            <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">一般</button>
            <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">已处理</button>
        </div>
    </div>

    <!-- 预警列表 -->
    <div class="p-4 space-y-4">
        <!-- 紧急预警 -->
        <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-red-500">
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-exclamation-triangle text-red-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">检测超时预警</h3>
                        <p class="text-sm text-gray-500">3辆车检测超过24小时</p>
                    </div>
                </div>
                <div class="flex items-center">
                    <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">紧急</span>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-3">
                <div>
                    <div class="text-xs text-gray-500">影响车辆</div>
                    <div class="text-sm font-medium text-gray-800">3辆</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">超时时长</div>
                    <div class="text-sm font-medium text-red-600">26小时</div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="text-xs text-gray-500">创建时间：2小时前</div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 bg-red-600 text-white text-xs rounded">立即处理</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded">查看详情</button>
                </div>
            </div>
        </div>

        <!-- 重要预警 -->
        <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-orange-500">
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-clock text-orange-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">过户延期预警</h3>
                        <p class="text-sm text-gray-500">5辆车过户资料不齐</p>
                    </div>
                </div>
                <div class="flex items-center">
                    <span class="px-2 py-1 bg-orange-100 text-orange-600 text-xs rounded-full">重要</span>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-3">
                <div>
                    <div class="text-xs text-gray-500">影响车辆</div>
                    <div class="text-sm font-medium text-gray-800">5辆</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">缺失资料</div>
                    <div class="text-sm font-medium text-orange-600">12项</div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="text-xs text-gray-500">创建时间：4小时前</div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 bg-orange-600 text-white text-xs rounded">补充资料</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded">查看详情</button>
                </div>
            </div>
        </div>

        <!-- 一般预警 -->
        <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-yellow-500">
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-ship text-yellow-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">物流延迟预警</h3>
                        <p class="text-sm text-gray-500">2辆车物流信息异常</p>
                    </div>
                </div>
                <div class="flex items-center">
                    <span class="px-2 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full">一般</span>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-3">
                <div>
                    <div class="text-xs text-gray-500">影响车辆</div>
                    <div class="text-sm font-medium text-gray-800">2辆</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">延迟时长</div>
                    <div class="text-sm font-medium text-yellow-600">6小时</div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="text-xs text-gray-500">创建时间：6小时前</div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 bg-yellow-600 text-white text-xs rounded">联系物流</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded">查看详情</button>
                </div>
            </div>
        </div>

        <!-- 已处理预警 -->
        <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-green-500 opacity-75">
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-check text-green-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">检测完成通知</h3>
                        <p class="text-sm text-gray-500">Audi A6检测已完成</p>
                    </div>
                </div>
                <div class="flex items-center">
                    <span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">已处理</span>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-3">
                <div>
                    <div class="text-xs text-gray-500">处理车辆</div>
                    <div class="text-sm font-medium text-gray-800">1辆</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">检测等级</div>
                    <div class="text-sm font-medium text-green-600">S级</div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="text-xs text-gray-500">处理时间：1小时前</div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded">查看详情</button>
                </div>
            </div>
        </div>

        <!-- 一般预警 2 -->
        <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-blue-500">
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-file-alt text-blue-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">资料过期预警</h3>
                        <p class="text-sm text-gray-500">3份资料即将过期</p>
                    </div>
                </div>
                <div class="flex items-center">
                    <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">提醒</span>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-3">
                <div>
                    <div class="text-xs text-gray-500">过期资料</div>
                    <div class="text-sm font-medium text-gray-800">3份</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">剩余时间</div>
                    <div class="text-sm font-medium text-blue-600">2天</div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="text-xs text-gray-500">创建时间：8小时前</div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 bg-blue-600 text-white text-xs rounded">更新资料</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded">查看详情</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 预警设置 -->
    <div class="bg-white p-4 mb-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-gray-800">预警设置</h3>
            <button class="text-blue-600 text-sm">编辑</button>
        </div>
        <div class="space-y-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-bell text-blue-600 mr-3"></i>
                    <span class="text-sm text-gray-600">检测超时预警</span>
                </div>
                <div class="flex items-center">
                    <span class="text-xs text-gray-500 mr-2">24小时</span>
                    <div class="w-10 h-6 bg-blue-600 rounded-full relative">
                        <div class="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-clock text-orange-600 mr-3"></i>
                    <span class="text-sm text-gray-600">过户延期预警</span>
                </div>
                <div class="flex items-center">
                    <span class="text-xs text-gray-500 mr-2">48小时</span>
                    <div class="w-10 h-6 bg-blue-600 rounded-full relative">
                        <div class="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-ship text-yellow-600 mr-3"></i>
                    <span class="text-sm text-gray-600">物流延迟预警</span>
                </div>
                <div class="flex items-center">
                    <span class="text-xs text-gray-500 mr-2">12小时</span>
                    <div class="w-10 h-6 bg-gray-300 rounded-full relative">
                        <div class="w-4 h-4 bg-white rounded-full absolute left-1 top-1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速操作 -->
    <div class="p-4">
        <div class="grid grid-cols-2 gap-4">
            <button class="bg-blue-600 text-white py-3 rounded-lg font-medium">
                <i class="fas fa-plus mr-2"></i>
                新增预警
            </button>
            <button class="bg-green-600 text-white py-3 rounded-lg font-medium">
                <i class="fas fa-download mr-2"></i>
                导出报告
            </button>
        </div>
    </div>
</body>
</html> 